<template>
    <view class="search-sort-wrap">
        <view class="search-sort" >{{title}}</view>
        <view class="search-input">
            <image class="search-input-icon" src="https://cdn.quantifynet.cn/dti/icon_home_search@3x.png"></image>
            <input
                class="search-info"
                placeholder-style="color:#999999"
                :disabled="disabled"
                :focus="showSync"
                :placeholder="placeholder"
                :maxlength="maxlength"
                @confirm="confirm"
                confirm-type="search"
                type="text"
                v-model="searchVal"
            />
        </view>
    </view>
</template>

<script>
export default {
    name: 'USearchSort',
    props: {
        disabled: {
            type: Boolean,
            default: false
        },
        placeholder: {
            type: String,
            default: '搜索'
        },
        maxlength: {
            type: [Number, String],
            default: 100
        },
		title: {
		    type: String,
		    default: '默认排序'
		},
        keyword: {
            type: String,
            default: ''
        },
        showSync: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            searchVal: ''
        };
    },
    watch: {
        searchVal() {
            this.$emit('input', {
                value: this.searchVal
            });
        },
        keyword: {
            handler(val) {
                // console.log(val);
                this.keyword = val;
                // console.log(this.keyword)
                this.searchVal = this.$props.keyword;
            },
            immediate: true
        }
    },
    methods: {
        cancel() {
            this.$emit('cancel', {
                value: this.searchVal
            });
            this.searchVal = '';
            this.showSync = false;
        },
        confirm() {
            console.log(this.searchVal)
            this.$emit('confirm', {
                value: this.searchVal
            });
            
        },
        onClick() {
            this.$emit('click');
        }
    }
};
</script>

<style lang="less">
.search-sort-wrap {
    width: 750rpx;
    height: 92rpx;
    background-color: rgba(255, 255, 255, 1);
    padding: 11rpx 30rpx;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
	display: flex;
    .search-sort {
        color: rgba(136, 136, 136, 1);
        font-size: 28rpx;
    }
    .search-input {
        border-radius: 34rpx;
        background-color: rgba(216, 216, 216, 0.26);
        width: 278rpx;
        height: 68rpx;
        padding: 14rpx 30rpx;
        box-sizing: border-box;
        align-items: center;
		display: flex;
        .search-input-icon {
            width: 26rpx;
            height: 28rpx;
            margin-right: 12rpx;
        }
        .search-info {
            width: 180rpx;
            // height: 40rpx;
            // display: block;
            // overflow-wrap: break-word;
            color: rgba(153, 153, 153, 1);
            font-size: 28rpx;
          
        }
    }
}
</style>
